<template>
  <div class="spu"><img width="220px" height="220px"
      :src="base_img_url+spu.attrKeyList[0].attrValueList[attr_index].value_images[0]" class="hand">
    <div class="flex item-start mt-10">
      <template v-for="(attr,index) in spu.attrKeyList[0].attrValueList">
        <img width="25px" height="25px" :src="base_img_url + attr.value_images[0]" class="spu-sku hand" v-if="index <3"
          @mousemove="attr_overed(index)" :class="{'active':index==attr_index}">
      </template>
    </div>
    <div class="mt-10 red text-xl text-left weight">￥{{spu.skuList[0].sku_price}} </div>
    <div class="mt-10 dark text-xs text-left hand hover-red"> {{spu.skuList[0].sku_name}} </div>
  </div>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        attr_index: 0
      }
    },
    props: ['spu'],
    computed: {
      ...mapState('website', ['base_img_url'])
    },
    methods: {
      attr_overed(index) {
        this.attr_index = index
      }
    }
  }
</script>

<style scoped="scoped">
  .spu {
    padding: 5px;
    width: 220px;
  }

  .spu:hover {
    box-shadow: 0px 0px 5px #ccc;
  }

  .spu-sku {
    border: 2px solid #ccc;
    padding: 2px;
    margin-right: 2px;
  }

  .spu-sku.active {
    border: 2px solid #e1251b;
  }
</style>
